<template>
  <div class="wrap">
    <select-platform v-model="queryParams.platformType" @change="changePlatform" :num-arr="platformNum" :platform-type="queryParams.platformType" :show-packet="true"></select-platform>
    <div class="header">
      <div class="left">
        <el-select
          v-model="queryParams.userId"
          placeholder="请选择用户"
          size="small"
          class="mgr10 mgb10"
          style="width: 130px"
          @change="queryParams.accountId = '';changeOption()"
          v-if="userOptions.length > 1"
          filterable
          clearable>
          <el-option :label="$t('common.allUsers')" value=""></el-option>
          <el-option
            v-for="user in userOptions"
            :key="user.id"
            :label="user.account"
            :value="user.id"
          ></el-option>
        </el-select>

        <el-select
          v-model="queryParams.accountId"
          size="small"
          class="mgr10 mgb10"
          style="width: 130px"
          @change="changeOption()"
          v-if="accountOptions.length > 1"
          filterable
          clearable
        >
          <el-option :label="$t('common.allStores')" value=""></el-option>
          <el-option
            v-for="account in accountOptions"
            :key="account.id"
            :label="account.showName"
            :value="account.id"
          ></el-option>
        </el-select>

        <el-select
          v-model="queryParams.goodsType"
          size="small"
          class="mgr10 mgb10"
          style="width: 130px;"
          @change="changeOption"
          clearable
        >
          <el-option :label="$t('order.allListing')" value=""></el-option>
          <el-option :label="$t('order.singleListing')" :value="1"></el-option>
          <el-option :label="$t('order.multipleListing')" :value="2"></el-option>
        </el-select>

        <el-select
          v-model="queryParams.refundSticker"
          size="small"
          class="mgr10 mgb10"
          style="margin-left: 0; width: 130px"
          @change="changeOption"
          clearable
        >
          <el-option :label="$t('order.Total cost situation')" value=""></el-option>
          <el-option :label="$t('order.Do not return')" :value="0"></el-option>
          <el-option :label="$t('order.Returned')" :value="1"></el-option>
        </el-select>

        <el-select
          v-model="queryParams.before_cancel_order_status"
          size="small"
          class="mgr10 mgb10"
          style="margin-left: 0; width: 130px;"
          @change="changeOption"
          clearable
        >
          <el-option label="原订单状态" value=""></el-option>
          <el-option label="已发货" :value="2"></el-option>
          <el-option label="已完成" :value="3"></el-option>
          <el-option label="已揽件" :value="7"></el-option>
          <el-option label="运输中" :value="8"></el-option>
        </el-select>

        <div style="display: inline-block">
          <el-input
            size="small"
            style="width: 320px; margin-right: 10px; margin-bottom: 10px"
            v-model="queryParams.keyword"
            :placeholder="$t('order.searchForOrderID/Listing ID/SKU')"
            @keyup.enter.native="changeOption(true)"
            clearable @clear="changeOption(false, 'clear')"
          ></el-input>
          <el-button size="small" type="primary" icon="el-icon-search" @click="changeOption(true)"></el-button>
          <export-button :func="func" :query-params="queryParams" :exportType="'cancel_order_list'" :getTotal="total"></export-button>
        </div>

      </div>

      <div class="right">

      </div>
    </div>
    <div class="content">
      <el-table
        :data="data"
        row-key="id"
        border
        v-loading="loading"
        :row-class-name="customRowClassName"
        v-tableHeight="{bottomOffset: 65}"
        height="100px"
        ref="tableData"
      >
        <el-table-column
          prop="orderId"
          :label="$t('table.orderId')"
          align="center"
          width="200"
          fixed="left"
        >
          <template slot-scope="{row}">
            <diy-link @click="jumpInfo(row)">{{row.orderId}}</diy-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="num"
          :label="$t('table.productQuantity')"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="userAccount"
          :label="$t('order.user name')"
          align="center"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="showName"
          :label="$t('table.store')"
          align="center"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="beforeCancelOrderStatus"
          label="原订单状态"
          align="center"
          min-width="100"
        >
          <template #header>
            <span>原订单状态</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <template #content>订单被取消之前的状态</template>
              <i class="el-icon-question" style="color:#409eff; margin-left:5px;"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdDate"
          :label="$t('table.orderTime')"
          align="center"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="dateDroppedOff"
          label="揽件时间"
          align="center"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="dateInTransit"
          label="装车时间"
          align="center"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="cancelDate"
          :label="$t('table.cancelTime')"
          align="center"
          min-width="200"
        >
          <template slot-scope="{row}">
            {{row.cancelDate || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="stickerPrice"
          :label="$t('table.Sticker fee')"
          align="center"
          width="100"
        >
          <template slot-scope="{row}">
            {{row.refundSticker === -1 ? '-' : (row.refundSticker === 0 ? $t('order.Do not return') : $t('order.Returned'))}}
          </template>
        </el-table-column>
        <el-table-column
          prop="refundShippingFee"
          :label="$t('packet.小包运费')"
          align="center"
          width="100"
          v-if="false"
        >
          <template slot-scope="{row}">
            {{row.refundShippingFee === -1 ? '-' : (row.refundShippingFee === 0 ? $t('order.Do not return') : $t('order.Returned'))}}
          </template>
        </el-table-column>
        <el-table-column
          prop="toStockNum"
          label="转为库存数量"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          :label="$t('table.operate')"
          align="left"
          min-width="200"
          fixed="right"
        >
          <template slot-scope="{row}">
            <el-button class="mgr10" @click="jumpInfo(row)">{{$t('order.detail')}}</el-button>
            <cancel-tips-button :data="row" class="mgr10" @changeOrder="getData" v-if="false"></cancel-tips-button>
            <to-stock-button :data="row" @changeOrder="getData"></to-stock-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @current-change="getData"
        :current-page.sync="queryParams.page"
        :page-sizes="[10, 20, 50, 100, 500, 1000]"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ToStockButton from "@/views/order/components/ToStockButton.vue";
import {
  getAliexpressOrderList,
  getFaOrderList,
  getOrderList,
  getOrderPlatformNum,
  getPacketOrderList,
  getSiOrderList,
  getTikTokOrderList,
} from "@/api/order";
import {getUserOptions} from "@/api/user";
import CancelTipsButton from "@/views/order/components/CancelTipsButton.vue";
import ExportButton from "@/views/order/components/ExportButton.vue";
import SelectPlatform from "@/components/SelectPlatform/index.vue";
import {deepCopy} from "@/utils";

export default {
  name: "cancelOrderList",
  components: {SelectPlatform, ExportButton, CancelTipsButton, ToStockButton},
  data(){
    return {
      queryParams:{
        page: 1,
        pageSize: 20,
        keyword: '',
        accountId: '',
        goodsType: '',
        refundSticker: '',
        tabType: 4,
        goodsNumType: '',
        accountIds: [-1],
        userIds: [-1],
        userId: '',
        platformType: this.$store.getters.defaultAccountTypeNum,
        exportType: 'cancel_order_list',
        before_cancel_order_status: '',
      },
      data: [
      ],
      userOptions: [],
      loading: false,
      total: 0,
      platformNum: [],
      is_search: false,
      func: getOrderList,
    };
  },
  created() {
    this.getAccountOption()
    this.getData()
    this.getOrderPlatformNum()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  computed:{
    accountOptions(){
      const arr = [];
      this.userOptions.forEach(item=>{
        item.accountList.forEach(_item=>{
          if(this.queryParams.userId === '' || this.queryParams.userId === item.id){
            arr.push(_item)
          }
        })
      })
      return arr;
    }
  },
  methods:{
    getOrderList,
    getFaOrderList,
    getSiOrderList,
    getAccountOption(){
      getUserOptions()
        .then(res=>{
          this.userOptions = [];
          res.data.forEach(item=>{
            if(item.accountList.length){
              this.userOptions.push({
                id: item.id,
                account: item.account,
                accountList: item.accountList,
              })
            }

          })
        })
    },
    // 获取数据
    getData(){
      this.loading = true
      this.selectOrderId = []; // 重置选择
      this.func = getOrderList;
      if(this.queryParams.platformType === 2){
        this.func = getFaOrderList;
      } else if (this.queryParams.platformType === 4) {
        this.func = getSiOrderList;
      } else if (this.queryParams.platformType === 6) {
        this.func = getTikTokOrderList;
      } else if (this.queryParams.platformType === 7) {
        this.func = getPacketOrderList;
      } else if (this.queryParams.platformType === 8) {
        this.func = getAliexpressOrderList;
      }
      this.func(this.queryParams)
        .then(res=>{
          //进行排序（将已操作库存的数据滞后）
          // for (var i = 0; i < res.data.length - 1; i++) {
          //   for (var j = 0; j < res.data.length - i - 1; j++) {
          //     const jOneInfo = res.data[j].toStock === -1 && (res.data[j].orderStatus === 4 || res.data[j].orderStatus === 5)
          //     const jTwoInfo = res.data[j + 1].toStock === -1 && (res.data[j + 1].orderStatus === 4 || res.data[j + 1].orderStatus === 5)
          //     if (!jOneInfo && jTwoInfo) {
          //       var temp = res.data[j];
          //       res.data[j] = res.data[j + 1];
          //       res.data[j + 1] = temp;
          //     }
          //   }
          // }
          this.data = res.data
          this.loading = false;
          this.total = res.info.total
        })
    },
    // 触发变更事件
    changeOption(is_search = false, type = ''){
      if (is_search === true) {
        //判断是否使用过搜索按钮
        this.is_search = true
      }
      if (type === 'clear') {
        if (this.is_search === false) {
          return
        } else {
          this.is_search = false
        }
      }
      this.queryParams.page = 1;
      this.getData()
    },
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.page = 1;
      this.getData();
    },
    jumpInfo(row){
      this.$router.push({
        name: 'orderInfo',
        query: {
          orderId: row.orderId,
          accountTypeNum: row.accountTypeNum,
        },
      })
    },
    changePlatform(){
      this.queryParams.page = 1;
      this.getData()
    },
    getOrderPlatformNum(){
      getOrderPlatformNum({type:2})
        .then(res=>{
          this.platformNum = deepCopy(res.data)
        })
    },

    customRowClassName({row}){
      // return 'highlighted-row';
      if (row.before_cancel_order_status === 2 && row.to_stock_num === 0) {
        return 'highlighted-row-two';
      }
      return '';
    },

  }
}
</script>

<style>
.el-table .highlighted-row-two {
  background-color: #FEF0EF;
}
</style>
<style scoped lang="scss">
.wrap {
  padding: 30px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 0 0 0;
    margin-top: 20px;
  }
}
</style>
